<template>
    <div  class="grayBgColor"> 
        <div class="classifyContent">
            <div class="center mb20">
                <span class="fontSize14 colorOrange"> < {{parmInfo.brandName}} > </span> 
                <span class="fontbold fontSize16">{{parmInfo.activeNav==3?`${parmInfo.date}年`:`${parmInfo.date}`}}渠道汇总表</span>
            </div>
            <div v-for="(item,index) in list" :key="index" class="w50 disInline center whiteBg classifyList" @click="goCheck(item)">
                <div class="colorBlue fontbold fontSize16 mb10">{{item.channelName}}</div>
                <div class="fontSize16 fontbold">{{item.thisMonthSales}}</div>
                <div class="fontSize12 color333" :class="{'colorGreen':item.thisMonthLiftRate<0,'colorRed':item.thisMonthLiftRate>0}">
                    <span >{{item.thisMonthLiftRateText}}</span> 
                    <van-icon v-if="item.thisMonthLiftRate>0 || item.thisMonthLiftRate<0" name="down"  :class="{'rotate180':item.thisMonthLiftRate>0}"/></div>
            </div>
            <div class="right color999 fontSize11 mt10">*销售额单位：万</div>
            <!-- <div class="right color999 fontSize11 mt10">*列表展示销售额(万)与月累同期提升比</div> -->
        </div>
        <div class='listSty'>
            <div class="flex">
                <div class="w25 center fontSize12 tableTitleBgcolor colorfff">名称</div>
                <div class="w25 center fontSize12 tableTitleBgcolor  colorfff">销售额(万)</div>
                <div class="w25 center fontSize12 tableTitleBgcolor colorfff">同期提升比</div>
                <div class="w25 center fontSize12 tableTitleBgcolor colorfff">同期同店提升比</div>
            </div>
            <div class="content">
                <div v-for="(item,index) in list" :key="index" class="flex list">
                    <div class="w25 center whiteBg">{{item.channelName}}</div>
                    <div class="w25 center whiteBg">{{item.thisMonthSales}}</div>
                    <div class="w25 center whiteBg">{{item.thisMonthLiftRateText}}</div>
                    <div class="w25 center whiteBg">15%</div>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
import { Toast} from 'vant'
export default{
    data(){
        return{
            list:[],
            // brandName:'',
            // brandId:'',
            // nowDate:'',
            parmInfo:{}
        }
    },
    created(){
        let parm=this.$route.query
        console.log('parm',parm)
        // this.nowDate=parm.date
        // this.brandName=parm.brandName
        // this.brandId=parm.id
        this.parmInfo=parm
        this.getData()
    },
    methods:{
        getData(){
            Toast.loading({
                message: '加载中',
                forbidClick: true,
                duration:0
            })
            let obj={
                date:this.parmInfo.date,
                brandId:this.parmInfo.id,
                date_type: +this.parmInfo.activeNav
            }
            console.log('ooooo',obj)
            this.$apiRequest.getClassifyTotal(obj).then(res =>{
                console.log('这是什么',res)
                if(res.code==1){
                    // res.data.map(i=>{
                    //     i.thisMonthLiftRateText='-'
                    //     i.thisMonthLiftRate = '-'
                    // })
                    this.list=res.data
                    console.log('this.list',this.list)
                }
                Toast.clear()
            })
        },
        goCheck(info){
            console.log('infffffffff',info)
            this.parmInfo.channelId=info.channelId
            let url=''
            this.parmInfo.activeNav==1?url='dailySalesWarehouse':url='monthSalesWarehouse'
            this.$router.push({name:url,query:this.parmInfo})
        }
    }
}
</script>
<style lang="less" scoped>
.w50{width: 50%}
.grayBgColor{
    background-color:#f1f1f1;
}
.classifyContent{
    width: 90%;
    margin: 0 auto;
    padding: 0.6rem 0;
    .classifyList{
        // width: 90%;
        padding: 0.24rem 0;
        margin: 0 auto;
        border-bottom: 1px #f1f1f1 solid;
        border-right: 1px #f1f1f1 solid;
    }
}
.rotate180{transform: rotate(180deg);}
.w25{
    width: 25%;
    padding: 0.1rem 0;
}
.listSty{
    width: 90%;
    margin: 0 auto;
    .content .list:nth-child(2n){
        background-color: #eef1f9 !important;
    }
}
</style>
